<template>
  <view class="definite">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="编辑员工信息"
      back-text=""
    >
    </u-navbar>
    <view class="em_message">
      <view class="em_me">·员工账号信息·</view>
    </view>
    <view class="em_message" style="display: flex; align-items: center">
      <span class="em_name em">员工姓名：</span>
      <span class="name em">
        <u-input
          v-model="from.nickName"
          placeholder="请输入员工姓名"
          type="text"
        />
      </span>
    </view>

    <view class="em_message" style="display: flex; align-items: center">
      <span class="em_phone em">员工手机号：</span>
      <span class="phone em">
        <u-input
          v-model="from.phone"
          placeholder="员工的登录账号"
          type="text"
        />
      </span>
    </view>

    <view class="em_message" style="display: flex; align-items: center">
      <span class="em_name em">账号密码：</span>
      <span class="name em">
        <u-input v-model="from.pwd" placeholder="请输入账号密码" type="text" />
      </span>
    </view>

    <view
      class="em_message"
      style="
        margin-top: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <span class="em_me">·员工是否享受剩余分润(除去商户)·</span>
      <span>
        <u-switch
          v-model="from.staffProfitType"
          active-color="#02af74"
          inactive-color="#cccccc"
        ></u-switch>
      </span>
    </view>
    <view class="des">
      注：当前设置为否，您设置的员工铺货最高分润比例，扣除商户的分润，剩余部分将自动计算到您的账号
    </view>
    <view
      class="em_message"
      style="
        margin-top: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <span class="em_me">·员工铺货可设置最高分润·</span>
    </view>
    <view class="em_message" style="display: flex; align-items: center">
      <span class="em_name em">分润比例(%)：</span>
      <span class="em">
        <u-input v-model="from.staffProfitValue" :maxlength="4" type="number" />
      </span>
    </view>
    <view class="des">
      注：员工若设置分润值要低于自己；如果员工无分润，扣除商户，剩余部分将计算给您的账户。
    </view>
    <view
      class="em_message"
      style="
        margin-top: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <span class="em_me">·员工是否有提现权限·</span>
      <span>
        <u-switch
          v-model="from.staffDrawMoneyStatus"
          active-color="#02af74"
          inactive-color="#cccccc"
        ></u-switch>
      </span>
    </view>
    <view class="des" style="margin-bottom: 100px">
      注：当前设置为否，员工无提现权限，员工分润将会保存在平台，可在员工列表中开启员工提现。
    </view>

    <!-- <view style="height: 2.47rem; background: #ffffff; margin-top: 0.3rem"></view> -->

    <!-- <button class="sure">确认保存</button> -->
    <view class="footP"      @click="addM">
      <view
    
        style="padding: 0.7rem; display: flex; align-items: center"
      >
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view style="color: white; margin-left: 0.2rem">确认保存</view>
      </view>
    </view>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import uNavbar from '../../../uview-ui/components/u-navbar/u-navbar.vue'
 import uForm from  '../../../uview-ui/components/u-form/u-form.vue'
  import uFormItem from  '../../../uview-ui/components/u-form-item/u-form-item.vue'
  import uInput  from '../../../uview-ui/components/u-input/u-input.vue'
import { addStaff ,editStaff} from "../../../utils/uniApi";
import { AppModule } from "../../../store/modules/app";
@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
    components:{
    'u-navbar':uNavbar,
    'u-form':uForm,
    'u-form-item':uFormItem,
    'u-input':uInput
  }
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public from:any = {
    nickName: "",
    phone: "",
    staffProfitType: false, //员工是否享受分润权限(0 有权限，1无权限)
    staffProfitValue: "", //员工分润比例(最大为1)
    staffDrawMoneyStatus: true, //员工提现权限（0 有权限，1 无权限）
  };

  BackM() {

      uni.navigateTo({
      url: "../../../pages/item/edit/myEmployee",
    });
  
  }

  created() {
  
  }
  onLoad(options:any) {
            // console.log(options)
            //   if(options.type==true){
            //     console.log('bianji')
            //         editStaff(this.from).then((res:any)=>{

            //             console.log(res,'编辑')
            //         })
            //   }
  }

  mounted() {

        this.from=AppModule.staffInfo


        console.log(' this.from', this.from)

                    // editStaff(AppModule.staffInfo).then((res:any)=>{
                    //     console.log(res,'编辑')
                    // })
     

  }

  addM() {
    // console.log("123", this.from);
    
     let data = JSON.parse(JSON.stringify(this.from))
     
    data.staffProfitType=data.staffProfitType.toString()
    data.staffDrawMoneyStatus=data.staffDrawMoneyStatus.toString()

    
    editStaff(data).then((res: any) => {
      console.log("resres", res);

        if(res.data.message=='操作成功'){

             uni.showToast({
        title:res.data.message,
        icon: "none",
        duration: 2000,
          });
          
        }
     

    });

  }
}
</script>

<style  lang="scss"  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.em_message {
  position: relative;
  background: #ffffff;
  padding: 0.7rem 0.4rem;
  border-bottom: 0.04rem #ffe5e5e5 solid;
}
.em_me {
  font-size: 0.78rem;
  font-weight: 400;
  color: #000000;
}
.em {
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0.05rem;
}
.name {
  padding-left: 1.5rem;
}
.phone {
  padding-left: 0.7rem;
}
.em_image {
  width: 3rem;
  height: 1.5rem;
  position: absolute;
  top: 0.6rem;
  right: 0.5rem;
}
.des {
  font-size: 0.6rem;
  font-weight: 300;
  color: #000000;
  background: #ffffff;
  padding: 0.4rem;
}
.sure {
  height: 2.5rem;
  line-height: 2.5rem;
  color: #ffffff;
  background: #02af74;
  border-radius: 0;
  cursor: pointer;
}

.footP {
  position: fixed;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

uni-button:after {
  border-radius: 0;
}
</style>